<template>
  <div class="about">
    <input class="title"  v-model="co.content">
    <div class="btn-wrapper" ><!--直接用content报错是因为只能用表达式而不是语句-->
      <a href="javascript:void(0)" @click="save">保存</a>
      <a href="javascript:void(0)" @click="deletes">删除</a>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name:'Detail-information',
    data(){
      return{
        co:{
          content:'',
        },

        Id:null,

      }
    },
    created() {//this.$route 具体是指向哪里
     this.Id= this.$route.params.Id//通过找到路由里的参数如id等；
      axios.get(` https://api.yizhanketang.cn/api/v1/todos/${this.Id}`).then(res=>{
      const {data}=res.data;//为什么不是data.content//不理解。
      this.co=data;//这里为什么直接只写了一个co而没有写content;
      })

      },
    methods:{
      save(){
        this.Id= this.$route.params.Id;
        axios.post(`https://api.yizhanketang.cn/api/v1/todos/${this.Id}`,{content:this.co.content}).then(()=>{
          this.$router.replace({
            name: "Home",
            query: {
              from: "Detail-information"
            }
          });
        })//如此通过post请求将信息传递到了数据库；
      /* let com=document.querySelector('.title');
       com.setAttribute('disabled',false)*///原生修改input里的属性值失败；


      },
      deletes(){
        axios.post(`https://api.yizhanketang.cn/api/v1/todos/${this.Id}/delete`,{content:this.co.content}).then(()=>{
          this.$router.replace({
            name: "Home",
            query: {
              from: "Detail-information"//跳转源头的名字
            }
          });

//无法跳转到HOME.vue//location.href 的替换方案。
        })

      }
    }

  }

</script>

<style lang="scss">
  a{
    display: block;
    text-decoration: none;
    color: #42b983;
  }
  .btn-wrapper{
    display: flex;
    width: 100px;
    margin: 10px auto;
    justify-content: space-between;
  }
</style>